<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @font-face{
            font-family: "iconfont";
            src:url(fonts/ux_1476296567_0808203/iconfont.ttf);
        }
        .iconfont{
            font-family: "iconfont";
            font-size:28px;
            color:#fff;
            font-style:normal;
        }
        body,ul,i,header{
            margin:0;
            padding:0;
            font-size:16px;
            font-family: "微软雅黑";
        }
        li{
            list-style: none;
        }
        .wrapper .header{
            width:100%;
            height:50px;
            line-height: 50px;
            position:fixed;
            top:0;
            background:-webkit-linear-gradient(-90deg,rgb(33, 184, 210) 50%,rgb(73, 192, 218) 50%);
            display:flex;
            z-index:10;
            overflow:hidden;
        }
        .wrapper .header div{
            text-align:center;
        }
        .wrapper .header div:nth-of-type(1){
            flex-grow:1;
        }
        .wrapper .header div:nth-of-type(2){
            flex-grow:7;
            flex-basis: 50%;
            text-align:center;
            color:#fff;
            font-size:16px;
        }
        .wrapper .header div:nth-of-type(3){
            flex-grow:1;
        }
        .wrapper .header div:nth-of-type(4){
            flex-grow:1;
        }
        .nav{
            width:100%;
            height:50px;
            position:fixed;
            bottom:0;
            border-top:solid 1px #f2f0f0;
            background:#fff;
        }
        .nav ul{
            display:flex;
            flex-direction:row;
            align-items:center;
            height:100%;
        }
        .nav li{
            width:20%;
            border-right:solid 1px #f2f0f0;
        }
        .nav i,.nav span{
            display:block;
            text-align: center;
        }
        .nav span{
            font-size:14px;
            padding-top:5px;
        }
        .nav i{
            font-size:18px;
            color:rgb(43, 161, 227);
        }
        .list{
            width:100%;
            margin-top:50px;
        }
        .list ul{
            display:flex;
            flex-flow:row wrap;
            justify-content: space-around;
            padding-bottom:70px;
        }
        .list li{
            flex-basis: 130px;
            flex-grow:1;
            margin:10px;
            height:120px;
            line-height:120px;
            text-align:center;
            position:relative;
            box-sizing:border-box;
            background:#fff;
            box-shadow:0 0 30px rgba(0,0,0,0.1) inset,0 0 4px rgba(0,0,0,.1);
        }
        .list li:after{
            content:'';
            display:block;
            position:absolute;
            width:80%;
            left:10%;
            bottom:0;
            height:60px;
            border-radius:100px/10px;
            z-index:-1;
            box-shadow:0 0px 10px rgba(0,0,0,.8);
        }
        .icon1::before{
            content:'\e61d';
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <div class="iconfont icon1"></div>
            <div>移动端网站开发</div>
            <div class="iconfont">&#xe610;</div>
            <div class="iconfont">&#xe779;</div>
        </header>
        <div class="list">
            <ul>
                <li>item-1</li>
                <li>item-2</li>
                <li>item-3</li>
                <li>item-4</li>
                <li>item-5</li>
                <li>item-6</li>
                <li>item-7</li>
                <li>item-8</li>
                <li>item-9</li>
                <li>item-10</li>
            </ul>
        </div>
        <nav class="nav">
            <ul>
                <li><i class="iconfont">&#xe649;</i><span>消息</span></li>
                <li><i class="iconfont">&#xe62f;</i><span>订单</span></li>
                <li><i class="iconfont">&#xe652;</i><span>购物车</span></li>
                <li><i class="iconfont">&#xe610;</i><span>会员</span></li>
                <li><i class="iconfont">&#xe681;</i><span>提醒</span></li>
            </ul>
        </nav>
    </div>
</body>
</html>
